<!--
/*
 * Copyright 2012 The Polymer Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style
 * license that can be found in the LICENSE file.
 */
-->
<!--
/**
 * @module Polymer Elements
 */
-->
<polymer-element name="g-keyframe-panel-transition" extends="g-panel-transition">
  <script>
    (function() {
      var END_EVENT = 'animationEnd';
      var WEBKIT_END_EVENT = 'webkitAnimationEnd';
      
      Polymer('g-keyframe-panel-transition', {
        transitionClass: 'animate',
        setup: function(inPanels) {
          this.super(arguments);
          this.panels.addEventListener(END_EVENT, this.finishListener);
          this.panels.addEventListener(WEBKIT_END_EVENT, this.finishListener);
        },
        teardown: function() {
          this.super(arguments);
          this.panels.removeEventListener(END_EVENT, this.finishListener);
          this.panels.removeEventListener(WEBKIT_END_EVENT, this.finishListener);
        },
        begin: function() {
          this.from.classList.add(this.forward ? 'panels-ascending-from' :
              'panels-descending-from');
          this.to.classList.add(this.forward ? 'panels-ascending-to' :
              'panels-descending-to');
        },
        complete: function() {
          this.from.classList.remove('panels-ascending-from', 
              'panels-descending-from');
          this.to.classList.remove('panels-ascending-to', 
              'panels-descending-to');
        }
      });
    })();
  </script>
</polymer-element>

